require(['./config'], () =>{
    require(['template','request','swiper','header','footer','zoom','fly'],(template,request,Swiper,header)=>{
        class Detail{
            constructor (){
                // console.dir($)
                this.init ()


            }
            init (){
                
                const id = window.location.search.slice(4)
              
                request.getDetail(id).then(resp =>{
                    // console.log(resp)
                    if (resp.code === 200){
                       const { detail } = resp.data
                    //    console.log(resp.data)
                        const {
                           title,id,photo,descContentList,price
                        }  = detail
                        this.detail = {
                            title,id,photo,price
                        }
                        // console.log(this.detail.id)
                        $('#detailList').html(template('detailTemplate',{
                            title,id,photo,descContentList,price
                        }))
                        this.zoom ()
                        this.slidePicture()
                        this.addToCar()
                    }
                })
            }
            zoom (){
               $('.mediumImg').elevateZoom({
                   gallery:'gal1'
               })
            // console.log(123)
            };
            slidePicture(){
                new Swiper('.swiper-container', {
                    scrollbar: '.swiper-scrollbar',
                    scrollbarHide: true,
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    spaceBetween: 30,
                    grabCursor: true
                }) 
            };
            addToCar (){
                $('.shopBtn').on('click','.addbtn', e =>{
                    this.fly(e)
                    let cartList =localStorage.getItem('cart')
                    if(cartList){
                        cartList = JSON.parse(cartList)
                        const isExist = cartList.some( cart =>{
                            return cart.id === this.detail.id
                            // console.log(cart.id)
                        })
                        // console.log(isExist,123)
                        if(isExist){
                            cartList = cartList.map( cart =>{
                                if (cart.id === this.detail.id)cart.num++
                                return cart
                            })
                           
                        }else{
                            cartList.push({
                                title:this.detail.title,
                                id : this.detail.id,
                                photo:this.detail.photo[0],
                                price:this.detail.price,
                                num :1,
                                check:true
                            })
                            // console.log(this.detail.id)
                         }
                        localStorage.setItem('cart',JSON.stringify(cartList))
                    }else{
                        localStorage.setItem('cart',JSON.stringify([
                           {
                            title:this.detail.title,
                            id : this.detail.id,
                            photo:this.detail.photo[0],
                            price:this.detail.price,
                            num :1,
                            check:true
                           }
                           
                        ])
                       
                        )
                    }
                    // console.log(this.detail.photo[0].url)

                    


                })
            };
            fly (e){
                // console.log(this.detail.photo[0].url)
                $(`<img src="${this.detail.photo[0].url}" style="width: 30px; height: 30px;">`).fly({
                    start:{
                      left: e.clientX,  //开始位置（必填）#fly元素会被设置成position: fixed
                      top: e.clientY,  //开始位置（必填）
                    },
                    end:{
                      left: $(window).width(), //结束位置（必填）
                      top: 200,  //结束位置（必填）
                    },
                    speed: 0.6, //越大越快，默认1.2
                    vertex_Rtop: 30, //运动轨迹最高点top值，默认20
                    onEnd: function(){
                      this.destroy()
                      header.shopNum()
                      // 购物车数量修改
                    //   header.calcCartNum()
                    } //结束回调
                  });


                }
            }


        new Detail ()

    })
})